<template>
    <div class="main-my-profile-cards-index">
        <div class="no-data" v-if="items.length === 0">
          <van-image width="100%" :src="img" />
          <section>
              <center class="title"><strong>No Saved Card</strong></center>
              <center class="content">You can save your card info to make purchase easier, faster.</center>
          </section>
        </div>
        <div class="warp" v-else>
          <van-swipe-cell  v-for="(val,key) in items" :key="key">
            <van-cell class="cell" :center="true" title-class="title" >
                <template #icon><img class="cover" :src="val.card_img" /></template>
                <template #title><span class="text">{{val.card_title}}</span></template>
                <template #label v-if="!val.isDefault"><span class="label">{{val.card_num}}</span></template>
                <template #right-icon>
                    <van-icon name="success" size="24" color="#58A919" v-if="val.isDefault" />
                    <van-icon name="arrow" size="18" color="#804F1E" v-else />
                </template>
            </van-cell>
            <template #right>
                <van-button square type="danger" class="delete-button" >
                    <van-icon name="delete-o" size="30" />
                </van-button>
            </template>
          </van-swipe-cell>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch  } from 'vue'
import img from '../../../../assets/applepay.png'

const items = ref<Array<{card_img: string,card_title: string, card_num: string, isDefault: boolean}>>([{
  card_img: img,
  card_title: 'My Card',
  card_num: '5342 **** **** 6745',
  isDefault: false
},{
  card_img: img,
  card_title: 'Apple Pay',
  card_num: '5342 **** **** 6745',
  isDefault: true
}])

</script>

<style lang="less" scoped>
.main-my-profile-cards-index {
  .no-data {
    padding: 15px;
    .title {
      color: #7F4E1D;
      font-weight: bold;
      font-size: 20px;
      line-height: 24px;
      letter-spacing: -0.165px;
      color: #7F4E1D;
      text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      margin: 16px 0px;
    }
    .content {
      font-size: 16px;
      line-height: 19px;
      letter-spacing: -0.165px;
      color: #7F4E1D;
      width: 260px;
      margin: auto;
    }
  }
  .warp {
    padding-top: 40px;
    .cell {
      padding: 32px 16px;
      :deep(.title) {
          margin-left: 16px;
          .text {
              line-height: 28px;
              font-weight: bold;
              font-size: 18px;
              letter-spacing: 0.005em;
              color: #804F1E;
          }
          .label {
            font-size: 14px;
            line-height: 17px;
            color: #6D3805;
          }
      }
      .cover {
        height: 38px;
      }
      &::after {
        width: 100vw;
        left: 0px;
      }
    }
  }
  .delete-button {
    width: 68px;
    height: 100%;
    background: rgba(164, 43, 50, 1);
  }
}
</style>
